<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    </head>

    <body>
        <div id="app">
            <el-row>
                <el-col :span="24">
                <div id="myChart" :style="{ width: '100%', height: '200px' }"></div>
                </el-col>
            </el-row>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            echarts,
            data: {
                echartsdata: {
                    title: {
                        text: "柱状图",
                        subtext: "子标题",
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        type: 'plain',
                        orient: 'horizontal'
                    },
                    xAxis: {
                        data: ["比赛次数", "队伍数量", "犯规次数", "射门次数", "红牌次数", "黄牌次数"],
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "队伍一",
                            type: "bar",
                            stack: 'Ad1',
                            data: [5, 20, 36, 10, 10, 20],
                        },
                        {
                            name: "队伍2",
                            type: "bar",
                            stack: 'Ad1',
                            data: [15, 10, 26, 17, 1, 25],
                        },
                    ],
                },
            },
            mounted() {
                this.draw();
            },
            methods: {
                draw() {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById("myChart"));
                    myChart.setOption(this.echartsdata);
                },
            }
        })
    </script>
</html>
